<template>
	<view>
		<navigator url="/pages/index/index" open-type="redirect">回首页</navigator>
	</view>
	<view>
		<!-- 
		 处理表单的时候要把表单输入框同步给JS中的响应变量。
		 手动绑定并监听太麻烦，可以使用 v-model 简化。
		 -->
		 <view>
			 <view>文本输入的绑定获取</view>
			 <view><p> Message is : {{message}}</p></view>
			 <view class="out">
				 <!-- 如果message没有在JS中定义的时候提示：
				 accessed during render but is not defined on instance. -->
				 <input v-model="message" placeholder="点我会有惊喜..." @focus="focus_first" @blur="blur_first"/>
				 <image src="/static/logo.png" :class="image_class"></image>
			 </view>
		 </view>
		 <view>
			 <view> ------ 多行文本 </view>
			 <view>
				 <!-- v-model 的作用相当于 @change的时候触发了 "event => areatext=event.target.value" -->
				 <span>文本内容是: </span> <p style="white-space: pre-line"> {{ areatext }}</p>
				 <textarea v-model="areatext" :value="areatextsome"></textarea>
			 </view>
		 </view>
		 <!-- checkbox/select/radio 在uniapp中好像 v-model不生效，直接还是用 @change 时间吧 -->
 		 <view>
			 <view> ------ 单个复选框：绑定选择与否的布尔值 </view>
			 <view>
				 <checkbox-group>
					<checkbox v-model="mycb_checked" value="ABC">ABC</checkbox>
				 </checkbox-group>
			     <view>当前状态: {{ mycb_checked }}</view>
			   </view>
		 </view>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	const message = ref("");
	const areatext = ref(""); // 多行文本
	const mycb_checked = ref(""); // 复选框是否选中了
	
	const areatextsome = ref("");
	const image_class = ref("pic"); // 图片的默认样式
	
	function focus_first(event) {
		console.log(event)
		image_class.value = "pic active"
	}
	
	function blur_first(event) {
		console.log(event)
		image_class.value = "pic"
	}
</script>

<style>
.out {
	/* 做一个效果，image藏在input下边，点击input的时候，image从底下逐渐探出头来，而且是从中间出来 */
	/* 为了让 image 和 input 处于同一行, 将image设置为absolute, out设置为relative相对于image来移动 */
	/* 如此一来，两个就重合了，我们把input放在image的上边，用z-index设置z轴，越大越考上 */
	position: relative;
	input {
		height: 40px;
		border: 1px solid grey;
		background-color: aliceblue;
		position: relative;
		z-index: 2;
	}
	.pic {
		width: 24px;
		height: 24px;
		position: absolute;
		/* -24px 将图片挪到了0点之上的24px处，默认是0*/
		top: 0px;  
		/* 计算出50%宽度的位置，然后向左偏移自身的一半，注意CSS的写法必须减号的两侧是空格 */
		left: calc(50% - 12px);
		z-index: 1;
	}
	/* 如果 .pic 元素拥有了 active 这个class，就将其top设置为 -24px, 也就是上去了，露头了*/
	.pic.active {
		top: -24px;
		z-index: 1;
	}
}  
</style>
